<template>
	<view class="index">
		<view class="search">
			<view class="status_bar"></view>
			<view class="search-box">
				<u-search placeholder="请输入关键字" v-model="keyword" @search="_search" @clear="_search"></u-search>
				<u-icon name="plus" size="36" class="search-icon" @tap="_uploadVideo"></u-icon>
			</view>
		</view>
		
		<view class="menu">
			<view class="menu-content">
				<u-tabs :list="list" :current="current" @change="change"></u-tabs>
			</view>
			<view class="menu-icon" @click="show = true">
				<u-icon name="grid" size="36"></u-icon>
			</view>
		</view>
			<view class="tab-list">
				<view class="tab-item" @click="xs">
						<image src="../static/novel.png" mode="aspectFit"></image>
						 <view>
							 小说
						 </view>
					</view>
				<view class="tab-item" @click="mh">
						<view>
								<image src="../static/cartoon.png" mode="aspectFit"></image>
						</view>
					漫画</view>
				<view class="tab-item" @click="zb">  <image src="../static/broadcast.png" mode=""></image>
					<view>
						
						直播
					</view>
				</view>
				<view class="tab-item" @click="news">
					 <image src="../static/news.png" mode=""></image>
					 <view>
						 新闻
					 </view>
					</view>
				<view class="tab-item"  @click="wd">
					 <image src="../static/qa.png" mode=""></image>
					  <view>
						  问答
					  </view>
					</view>
				<view class="tab-item" @click="sq">
						 <image src="../static/community.png" mode=""></image>
				
					<view>
						社区
					</view>
				</view>
				<view class="tab-item" @click="shuaship">
					<image src="../static/video.png" mode=""></image>
					 <view>
						 刷视频
					 </view>
				</view>
				<view class="tab-item" @click="tg">
						<image src="../static/extension.png" mode=""></image>
						 <view>
							 推广
						 </view>
					</view>
			</view>
		<scroll-view scroll-y class="scroll" @scrolltolower="_loadmore">
			<view class="scroll-box">
				<view class="swiper-box">
					<u-swiper :list="ad_list" title></u-swiper>
				</view>
				
				<view class="tabbar">
					<v-tabbar/>
				</view>
				
				<view class="title">热播</view>
				
				<!-- <view class="loading-text" v-if="init">正在加载...</view> -->
				
				<view class="list">
					<view class="list-item" :class="{'mr-16': index % 2 === 0}" v-for="(item, index) in video_list" :key="item.id" @tap="_play(item)">
						<image class="list-img" :src="item.thumb" mode="aspectFill"></image>
						<view class="list-text">
							<view class="u-line-1 list-title">{{ item.title }}</view>
						</view>
					</view>
				</view>
				
				<view class="loading-text" v-if="loading_more">加载更多中...</view>
				<view class="loading-text" v-if="is_last">没有更多了</view>
			</view>
		</scroll-view>
		
		<u-popup v-model="show" mode="right" width="70%">
			<view class="menu-popup">
				<view class="status_bar"></view>
				<view class="menu-popup_title">导航</view>
				<u-line/>
				<view class="menu-popup_content">
					<view class="menu-popup_item" v-for="(item, index) in list" :key="item.id" @click="change(index)">{{ item.name }}</view>
				</view>
			</view>
		</u-popup>
		
		<uni-popup ref="popup" type="center">
			<view class="popup-container">
				<view class="popup-box">
					<text class="popup-text" v-if="config">{{ config.base_pop_notice }}</text>
				</view>
				<image class="popup-close" src="@/static/macos-close.png" mode="aspectFit" @tap="_closePopup"></image>
			</view>
		</uni-popup>
				<aModel v-if="status" :title="title" @closeModel="modelCancel" @confirmModel="confirmModel" :content="locationContent" :bgColor="bgColor"></aModel>
		<view class="nav-bar">
			<nav-bar></nav-bar>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/v-tabbar/v-tabbar.nvue'
	import aModel from '@/components/xghc-accredit/index.vue'
	import { mapState } from 'vuex'
	import { VList, AD, Categories, BuyVideo } from '@/common/api.js'
	
	export default {
		data() {
			return {
				keyword: '',
				list: [],
				current: 0,
				video_list: [],
				page: 1,
				ad_list: [],
				is_last: false,
				loading_more: false,
				init: true,
				show: false,
				category_id: '',
				title:"",
				status:false,
				bgColor:'#FF448F',
				locationContent:''
			}
		},
		components: {NavBar,aModel},
		computed: {
			...mapState(['config', 'token', 'userinfo'])
		},
		onLoad() {
			this._videoList()
			this._adList()
			this._cagegory()
		},
		onShow() {
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success() {
					this.page=1
					VList({
						page: this.page,
						limit: 20,
						category_id: this.category_id,
						keyword: this.keyword
					}).then(({ code, data }) => {
						this.loading_more = false
						this.init = false
						if (code === 200) {
							
							const { list, current_page, total_page } = data
							this.video_list = list
							if (current_page >= total_page) {
								this.is_last = true
							}
						}
						
					})
				},
				fail(){
					
				}
			})
			uni.stopPullDownRefresh()
			
		},
		onReady() {
			setTimeout(() => {
				try {
				    const bool = uni.getStorageSync('index_popup')
					if (!bool) {
						this._openPopup()
					}
				} catch (e) {
				    // error
				}
			}, 1000)
		},
		methods: {
			confirmModel(){
				console.log("确认");
				this.status = false;
			},
			modelCancel(){
				this.status = false;
			},
			xs(){
				uni.navigateTo({
					url: `/pages/novel/index`
				})
			},
			mh(){
				uni.navigateTo({
					url: `/pages/novel/cartoon`
				})
			},
			news(){
				// pages/newsList/index
				uni.navigateTo({
					url: `/pages/newsList/index`
				})
			},
			zb(){
				uni.navigateTo({
					url: `/pages/live/live`
				})
				
			},
			shuaship(){
				uni.navigateTo({
					url: `/pages/home/home`
				})
				
				
			},
			tg(){
				// /pages/my/agent/agent
				uni.navigateTo({
					url: `/pages/my/promotion-record/promotion-record`
				})
			},
			wd(){
				return uni.showToast({
					title: '问答模块正在开发中',
					icon: 'none'
				})
			},
			sq(){
				
				uni.navigateTo({
					url: `/pages/message/message`
				})
			},
			_play(item) {
				if (!this.token) {
					// return uni.showToast({
					// 	title: '请登录后观看',
					// 	icon: 'none'
					// })
				}
				const { vip_share_free_num, is_vip, share_free_num } = this.userinfo
				const price = Number(item.price)
				const _paid = this.config.base_video_price === '1' && price > 0
				if (is_vip === 0) {
					if (_paid) {
						this._paid(item.id, price)
					} else {
						if (share_free_num < 1) {
							return uni.showToast({
								title: '免费观看次数已用完',
								icon: 'none'
							})
						} else {
							uni.navigateTo({
								url: `/pages/player?id=${item.id}`
							})
						}
					}
				} else {
					if (vip_share_free_num < 1 && _paid) {
						this._paid(item.id, price)
					} else {
						uni.navigateTo({
							url: `/pages/player?id=${item.id}`
						})
					}
				}
			},
			// 付费弹层
			_paid(data_id, price) {
				BuyVideo({
					data_id,
					check: 1
				}).then(({ code }) => {
					if (code === 400) {
						this.title='付费提示'
						this.locationContent=`观看当前视频需付费${price}个金币~`
						this.status=true;
						// uni.showModal({
						//     title: '付费提示',
						//     content: `观看当前视频需付费${price}个金币~`,
						//     success: (res) => {
						//         if (res.confirm) {
						// 			this._buyVideo(data_id)
						//         } else if (res.cancel) {
						//             console.log('用户点击取消')
						//         }
						//     }
						// })
					} else {
						uni.navigateTo({
							url: `/pages/player?id=${data_id}`
						})
					}
				})
			},
			_buyVideo(data_id) {
				uni.showLoading()
				BuyVideo({
					type: 'GOLD',
					data_id
				}).then(({ code, msg }) => {
					uni.hideLoading()
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					if (code === 200) {
						uni.navigateTo({
							url: `/pages/player?id=${data_id}`
						})
					}
				})
			},
			_uploadVideo() {
				uni.navigateTo({
					url: '/pages/upload-video/upload-video'
				})
			},
			_cagegory() {
				this.list = [{ name: '推荐', id: '' }]
				Categories({ pid: 1 }).then(({ code, data }) => {
					if (code === 200) {
						this.list = this.list.concat(data)
					}
				})
			},
			_loadmore() {
				if (this.is_last) return
				this.loading_more = true
				this.page++
				this._videoList()
			},
			_adList() {
				AD({ type: 2 }).then(({ code, data }) => {
					data.map(item => {
						this.ad_list.push({
							title: item.desc,
							image: item.img_url
						})
					})
				})
			},
			_videoList() {
				VList({
					page: this.page,
					limit: 20,
					category_id: this.category_id,
					keyword: this.keyword
				}).then(({ code, data }) => {
					this.loading_more = false
					this.init = false
					if (code === 200) {
						const { list, current_page, total_page } = data
						if (current_page === 1) {
							this.video_list = list
						} else {
							this.video_list = this.video_list.concat(list)
						}
						if (current_page >= total_page) {
							this.is_last = true
						}
					}
					uni.stopPullDownRefresh()
				})
			},
			change(index) {
				this.show = false
				this.video_list = []
				this.current = index
				this.category_id = this.list[index].id
				this.page = 1
				this.is_last = false
				this.init = true
				this._videoList()
			},
			_search() {
				this.video_list = []
				this.page = 1
				this.is_last = false
				this.init = true
				this._videoList()
			},
			_openPopup() {
				this.$refs.popup.open('center')
				try {
				    uni.setStorageSync('index_popup', true)
				} catch (e) {
				    // error
				}
			},
			_closePopup() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-list{
		justify-content: space-between;
		display: flex;
	 flex-wrap: wrap;
	 padding-top: 40rpx;
		
	}
	.tab-item{
		width: 22%;
		text-align: center;
		height: 150rpx;
		text-align: center;
		// line-height: 150rpx;
		margin-bottom: 20rpx;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.search-icon {
		margin-left: 8rpx;
	}
	.search-box {
		display: flex;
		align-items: center;
	}
	.menu-popup_item {
		background-color: #f4f4f5;
		padding: 16rpx 32rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
	}
	.menu-popup_content {
		padding: 24rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.menu-popup_title {
		font-size: 32rpx;
		font-weight: 700;
		padding: 24rpx;
	}
	.loading-text {
		text-align: center;
		color: #909399;
		font-size: 24rpx;
		padding-bottom: 24rpx;
	}
	.list-title {
		margin-top: 8rpx;
	}
	.list-text {
		overflow: hidden;
	}
	.scroll-box {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
	}
	.scroll {
		flex: 1;
		padding-bottom: 50px;
	}
	.mr-16 {
		margin-right: 16rpx;
	}
	.list-img {
		width: 343rpx;
		height: 190rpx;
		border-radius: 8rpx;
	}
	.list-item {
		width: 343rpx;
		margin-bottom: 16rpx;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 24rpx;
	}
	.title {
		font-size: 32rpx;
		font-weight: 700;
		padding: 0 24rpx;
		margin-bottom: 32rpx;
	}
	.swiper-box {
		padding: 24rpx;
		overflow: hidden;
	}
	.menu-icon {
		padding: 0 24rpx;
	}
	.menu-content {
		flex: 1;
		overflow: hidden;
		padding-left: 24rpx;
	}
	.menu {
		display: flex;
		align-items: center;
		background-color: #fff;
	}
	.tabbar {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.search {
		background-color: #fff;
		padding: 24rpx;
	}
	page {
		background-color: #f3f4f6;
	}
	.status_bar {
		height: var(--status-bar-height);
	}
	.popup-text {
		font-size: 28rpx;
	}
	.popup-close {
		width: 64rpx;
		height: 64rpx;
		margin-top: 32rpx;
	}
	.popup-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-box {
		border-radius: 8rpx;
		padding: 16rpx;
		background-color: #FFFFFF;
		width: 600rpx;
		min-height: 300rpx;
	}
	.index {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.nav-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
